<template>
  <div class="basemap">
    <div id="map" class="map"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      map: null,
    };
  },
  mounted() {
    this.initMap();
    // this.addLayer1();
  },
  methods: {
    initMap() {
      // 重庆市经纬度 107.820952,29.839539
      // const cqp = this.$L.latLng(29.5647398, 106.5478767);
      const cqp = this.$L.latLng(30.299539, 107.820952);

      this.map = this.$L
        .map("map", {
          // 版权控件
          attributionControl: false,
          // 缩放控件
          zoomControl: false,
        })
        .setView(cqp, 7);

      // 天地图token
      const tdtToken = "810e2cf8deac0489c6bb8ee29e5d9591";
      // 天地图 影像底图
      const wmtsImg =
        "http://t0.tianditu.gov.cn/img_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=" +
        tdtToken;

      this.$L
        .tileLayer(wmtsImg, {
          maxZoom: 18,
        })
        .addTo(this.map);
    },
    // 添加wms图层方法
    // options: url, layers, format, style, transparent, attribution
    addWMSLayer(options) {
      const { url, layers, format, style, transparent, attribution } = options;
      this.$L.tileLayer
        .wms(url, {
          layers: layers,
          format: format,
          style: style,
          transparent: transparent,
          attribution: attribution,
        })
        .addTo(this.map);
    },
    // wms请求失败
    addLayer1() {
      const options = {
        url: "https://ows.terrestris.de/osm/service?SERVICE=WMS&VERSION=1.1.1&REQUEST=GetCapabilities",
        layers: "OSM-WMS",
        format: "image/png",
        style: "",
        // 透明度 如果为 true，WMS 服务将返回具有透明度的图像
        transparent: false,
        attribution:
          "&copy; <a href='https://www.openstreetmap.org/copyright'>OpenStreetMap</a> contributors",
      };
      this.addWMSLayer(options);
    },
  },
};
</script>

<style lang="scss" scoped>
</style>